Cloudflareの動画配信プラットフォームサービスCloudflare Streamでライブ動画配信をしてみた
はじめに
清水です。Cloudflareの動画配信プラットフォームのサービスCloudflare Streamを試してみました。個人的にCloudflareの利用がはじめてだったこともあり、アカウントの作成からCloudflare Stremでのライブ動画配信までの手順を本エントリにてまとめてみたいと思います。
Cloudflare Stream !?
CloudflareはCDNで有名かと思いますが、CDN以外にも様々なサービスを提供しています。例えば以下エントリにて、Cloudflareのサービスのいつくかを垣間見ることができるかと思います。
さて、本エントリで扱うCloudflare Streamは動画配信プラットフォームのサービスです。サーバレスでライブストリーミングならびにオンデマンド動画配信が行えます。Cloudflareのネットワーク上に構築されていること、またスケーリングが容易であることなどが特徴になるかと思います。Playerが準備されている点も嬉しいポイントですね。
特徴は以下のCloudflare Blogにも記載があります。
なお「Cloudflare Stream Delivery」という名称のサービスもあるようです。
- 「Cloudflare Stream Delivery」 Cloudflareストリーム配信|ストリーミング動画CDN | Cloudflare
- Cloudflareで動画を配信する – Cloudflareヘルプセンター
こちらは「Cloudflare Stream」と異なり、動画配信プラットフォームというよりかは、動画配信を行うCDNの機能に重点をおいているようです。以下のCommunityでの会話にもあるように、独自ドメインでHLS/DASHなどをホスティングすることが可能なようでした。
本エントリではCloudflare Stream Deliveryは扱わず、Cloudflare Streamのみを扱いますのでご了承ください。
Cloudflareへのサインアップ
さっそくCloudflare Streamを使ってライブ動画配信を！といきたいところなのですが、私がCloudflareの利用がはじめてということで、まずCloudflareのサインアップ（アカウント作成）から始めていきたいと思います。
まずはCloudflareのページにアクセスし、右上の「サインアップ」から進みます。
アカウント作成画面に進みます。メールアドレスとパスワードを入力してアカウントを作成します。なお右上の言語設定で日本語に設定可能でした。
アカウント作成後はサービス選択画面に遷移します。
またサインアップ時のメールアドレスに[Cloudflare]: Please verify your email addressという件名のメールが届いていました。こちらのメール本文にあるリンクをクリックすることで、メールアドレスの検証が行われるようです。メールアドレスの検証を行い、サインアップを完了させておきましょう。
またCloudflare Streamは有料アドオンのサービスとなります。使用に際して料金が発生するのであらかじめ支払い方法を設定しておきます。（プラン | 料金設定 | Cloudflare ）
以下を参考に請求情報を設定しました。
左側メニューから「アカウントの管理」 > 「請求」に進みます。「請求」のメニューから「お支払い情報」を選択して必要な情報を入力していきます。最後に[確認]ボタンで支払い方法の登録を完了させます。
Cloudflare Streamのサブスクリプション
続いて、Cloudflare Streamのサブスクリプションを行います。ダッシュボードの左側メニューから「Stream」を選択、3つのプランが表示されます。今回は一番左側、「Cloudflare Stream」のみのプランを選択しました。右下の[Continue]ボタンで進みます。
料金について説明が表示されます。内容をよく確認して、右下の[続行]ボタンで進みます。
続いてストレージ容量についての選択となります。今回は一番左の1,000分のプランを選択しました。カスタムでは1,000分単位で指定ができるようです。
最後に支払いについて最終的な確認を行い、[購入]ボタンを押下します。これでサブスクリプション完了となります。
サブスクリプション完了後、以下の画面に遷移しました。サブスクリプションが完了した旨も表示されます。
なおサブスクリプション完了後、請求ページのサブスクリプションを確認するとCloudflare Streamが加わっていることが確認できます。
Cloudflare Streamでライブ動画配信をやってみる
Cloudflareのアカウント作成ならびにCloudflare Streamのサブスクリプションが完了しました。いよいよ本題のCloudflare Streamを使ったライブ動画配信をやってみます。
ドキュメントを参考に進めていきます。
Live Inputの作成
まずはLive Input（ライブ入力）の作成です。ダッシュボードの左側メニューから「Stream」 > 「ライブ入力」と進み、[ライブ入力を作成する]ボタンを押下します。
ライブ入力の名前を入力します。今回は「cloudflare-stream-live-input」としました。「ライブ再生と録音」はデフォルトのチェックが入った状態のまま進めてみます。[ライブ入力を作成する]ボタンで実際にライブ入力を作成します。
作成後は以下の画面（ライブ入力の詳細画面）に遷移しました。
この画面を下にスクロールしていくと、HLS Manifest URL、接続情報（RTMPS URL、RTMPSキー）などを確認することができます。
HLS Manifest URLはこのページ冒頭に記載されているライブ入力IDを含み、以下の形式となっていました。
https://videodelivery.net/[ライブ入力ID]/manifest/video.m3u8
また接続についてはRTMPSのほか、ProtocolとしてSRTも選択できるようです。
今回はRTMPSを選択して進めます。RTMPSキーは表示のリンクを押すと、「画面を共有していないか？」といった確認のダイアログが現れたあと、実際に表示されるというぐあいでした。（RTMPSキーは秘匿情報として扱う必要があるため、確認のダイアログ理解しています。気が利いていますね！）
Streaming Softwareを設定してライブ配信開始
RTMPS URLとRTMPSキーをStreaming Softwareに設定して、映像を打ち上げます。Streaming Softwareには、iPhone XS上のZixi ONAIRを使用しました。ProtocolはRTMPを選択、その他設定は以下のようにしています。ドキュメントのRequirementsを参考に、GOP Sizeは4秒としました。
Streaming Softwreで映像を打上げると、ライブ入力の画面に打ち上げた映像が流れます。入力ステータスの部分も変わっていますね！
Cloudflare Streamのプレイヤーでのライブ配信の視聴
ライブ入力の詳細画面から画面をもう少し下にスクロールしていくと、「ライブ入力で作成されたビデオ」の欄があります。ここで「ライブ」となっているのが、現在ライブ入力に対して打ち上げている映像からなるビデオということですね。（2つのうちの下のビデオは、Streaming Softwreの設定変更などで短時間だけ映像を打ち上げたものになります。）
青枠の部分をクリックすると、このビデオ詳細画面に進みます。ここで画面をスクロールしてくと「ビデオのリンク」という表記がありますね。
この「ビデオのリンク」をクリックすると動画プレイヤーのみのページが別タブで開きます。このURLをそのまま公開してもよさそうな感じですね。
また埋め込みコードも用意されていました。先ほどのビデオ詳細画面上部の「埋め込み」のタブを開きます。（以下、スクショの取り忘れ等のため、時間をおいて再度ライブストリーミングを行っています。映像をStreaming Softwreから打ち上げ直すとビデオIDが変わる点に注意しましょう。）
divとiframeのタグが用意されているので、これをそのままhtmlに貼り付けてみましょう。以下のコードを準備して、Amazon S3でホスティングしてみました。（ハイライトしている8行目が貼り付けたコードです。）
<html>
<head>
<title>Cloudflare Stream</title>
<style>
</style>
</head>
<body>
<div style="position: relative; padding-top: 100%;"><iframe src="https://iframe.videodelivery.net/[ビデオID]?poster=https%3A%2F%2Fvideodelivery.net%2F[ビデオID]%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
</body>
</html>
埋め込みコードでも、ライブストリーミングの再生ができていますね。（この埋め込みコード、画面を横長にするとちょっと表示が崩れました。スマホなど縦長画面でうまくマッチする感じなのかなと思います。）
またライブ配信終了（Streaming Softwreからの映像打ち上げ終了）後、上記の「ビデオのリンク」ページや埋め込みコードのページですぐに録画したものが視聴できるようになる、というぐあいでした。（これはライブ入力作成時に設定した「ライブ再生と録音」で保存されているのかと思います。）
Cloudflare Streamの料金について
Cloudflareのアカウント作成ならびにCloudflare Streamのサブスクリプションを行い、実際にライブ動画配信を確認してみました。順番が前後しますが、あらためてCloudflare Streamの料金を確認しておきましょう。
ドキュメントのFAQ、Stream Liveの「How does billing work for Stream Live?」に記載があります。
ヘルプセンターにもCloudflare Streamの請求について記載があります。
以下公式ブログにも参照ください。
サブスクリプションの際にも料金が発生することを確認していました。今回であれば、$5/1,000分/月の部分ですね。こちらはオンデマンド配信含めて、動画の保管ストレージ料金として費用が発生するものとなります。（プラン | 料金設定 | Cloudflareでは5ドル/ビデオ保存1,000分/月と確認できます。）ビデオ保存が1,000分単位である点に注意しましょう。
これに加えて、動画視聴による料金が発生します。こちらは動画視聴1,000分につき$1が発生します。（プラン | 料金設定 | Cloudflareでは1ドル/ビデオ閲覧1,000分/月と確認できます。）例えば1人が1,000分視聴しても、1,000人が1分視聴しても、どちらも合計1,000分で$1の料金ということですね。そしてライブ動画配信時の映像取り込みや動画変換に対しての費用は発生しないようです。
まとめ
Cloudflareのサーバレスな動画配信プラットフォームサービス「Cloudflare Stream」でライブ動画配信をやってみました。Cloudflare側の準備は単一のリソース作成だけ完了し、シンプルにライブストリーミングがはじめられる印象です。Playerが準備されている点や、自動録画機能、またシンプルな料金体系となっている点なども嬉しいポイントかと思います。ほかにも色々と機能があるようですので、追って確認していきたいと思います！
![Cloudflare StreamのLive Instant Clippingを使ってみた [open beta]](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-f6a10752c0ec2f1913230b2eb34a63c8/9b3b5893c230b3e40c46a79a9e06efc5/cloudflare-1200x630-1.jpg)
